<div id="bedlevelvisualizer_webcam_container" data-bind="visible: processing() && settingsViewModel.settings.plugins.bedlevelvisualizer.show_webcam() && settingsViewModel.webcam_streamUrl() != ''">
	<div id="bedlevelvisualizer_webcam_rotator" data-bind="css: { webcam_rotated: settingsViewModel.webcam_rotate90(), webcam_unrotated: !settingsViewModel.webcam_rotate90() }">
		<div class="webcam_fixed_ratio ratio43" data-bind="css: controlViewModel.webcamRatioClass">
			<div class="webcam_fixed_ratio_inner">
				<img data-bind="css: { flipH: settingsViewModel.webcam_flipH(), flipV: settingsViewModel.webcam_flipV() }, attr: { src: webcam_streamUrl() }" />
			</div>
		</div>
	</div>
</div>
<div class="row-fluid" id="bedlevelvisualizerwait" style="text-align: center;font-size: 25px;vertical-align: middle;padding-bottom: 25px;height: 465px;" data-bind="visible: processing() && (!settingsViewModel.settings.plugins.bedlevelvisualizer.show_webcam() || settingsViewModel.webcam_streamUrl() == '')">
	<div class="row-fluid" style="padding-top: 220px;">
		<i class="icon-spinner icon-spin icon-3"></i> <b>Please wait, retrieving current mesh.</b>
	</div>
</div>
<div class="row-fluid" id="bedlevelvisualizerwarning" style="text-align: center;font-size: 25px;vertical-align: middle;" data-bind="visible: !loginStateViewModel.isUser()"><i class="icon-warning-sign icon-3" style="color:red"></i> <b>You must be logged in.</b></div>
<div class="row_fluid" id="bedlevelvisualizercommandmissing" data-bind="visible: settingsViewModel.settings.plugins.bedlevelvisualizer.command() == ''">
	<div class="row_fluid">
		<p>In order for this plugin to work properly, you must configure the GCODE commands necessary to send back a Bed Topography Report in <a href="#" data-bind="click: function(){ settingsViewModel.show('#settings_plugin_bedlevelvisualizer'); }">Settings</a>.</p>
	</div>
</div>
<div class="row-fluid" data-bind="visible: loginStateViewModel.isUser() && settingsViewModel.settings.plugins.bedlevelvisualizer.command() !== ''">
	<div class="row-fluid" id="bedlevelvisualizergraph" data-bind="visible: !processing()"></div>
	<div class="row-fluid" style="text-align: center;padding-top: 20px;" data-bind="visible: loginStateViewModel.isUser() && !processing() && settingsViewModel.settings.plugins.bedlevelvisualizer.command() !== ''"><small data-bind="text: mesh_status"></small></div>
    <div class="row-fluid" id="bedlevelvisualizerbutton" style="text-align: center;"><button class="btn" data-bind="click: !processing() ? updateMesh : cancelMeshUpdate, enable: controlViewModel.isOperational() && !controlViewModel.isPrinting() && loginStateViewModel.isUser() && settingsViewModel.settings.plugins.bedlevelvisualizer.command() !== '', css: !processing() ? 'btn-primary' : 'btn-danger',attr: {'title': !processing() ? 'Run Mesh Update Process' : 'Cancel Mesh Update Process'}"><i class="icon-2 icon-info-sign" data-bind="attr: {'title': mesh_status}" data-toggle="tooltip"></i> <span data-bind="text: !processing() ? 'Update Mesh Now' : 'Cancel'"></span></button><button class="btn btn-mini pull-right" data-bind="click: function(){ settingsViewModel.show('#settings_plugin_bedlevelvisualizer'); }"><i class="fa fa-gear"></i></button></div>
</div>


<!-- Container for custom controls -->
<div id="control-bedlevelvisualizer-custom" style="clear: both; display: none; padding-top: 10px; padding-bottom: 10px;" data-bind="visible: loginStateViewModel.isUser && settingsViewModel.settings.plugins.bedlevelvisualizer.commands().length > 0, template: { name: 'customBedLevelVisulizerControls_controlTemplate', foreach: settingsViewModel.settings.plugins.bedlevelvisualizer.commands }"></div>

<!-- Container for mesh degrees -->
<div data-bind="if: $root.showdegree() && $root.mesh_data().length" class="row-fluid" align="center">
	<hr/>
	<span data-bind="template: {name: 'bedlevelvisualize_meshtable', data: {mesh: $root.mesh_adjustment(), len: 0}}"></span>
</div>

<!-- Template for mesh degrees -->
<script type="text/html" id="bedlevelvisualize_meshtable">
<div class="meshtable">
	<table data-bind="if: $data.mesh.length" class="table table-bordered table-condensed">
		<thead>
		<tr class="info">
			<th data-bind="attr: { 'colspan': $root.mesh_data_x().length + 1}" class="text-center">
				<!-- ko if: $data.len -->
					Mesh z Height in:
					<select style="width: 5em;"
					oninput="this.value = Math.abs(parseFloat(this.value || 1.0));"
					type="number"
					size="1"
					data-bind="	value: $root.mesh_unit,
								options: [{mm: 1.0, name:'mm'}, {mm: 10.0, name:'cm'}, {mm: 25.4, name:'in'}],
								optionsCaption: '?',
								optionsValue: 'mm',
								optionsText: 'name',
								valueAllowUnset: false">
					</select>
				<!-- /ko -->
				<!-- ko ifnot: $data.len -->
					<div title="Click to clear adjustment. Click on meshpoint to normalize adjustment to that point." data-toggle="tooltip" data-bind="click: function(){$root.mesh_zero(0);}">Adjustment Angle (degrees)</div>
				<!-- /ko -->
			</th>
            <!-- ko if: !$root.settings_active() -->
			<th class="text-center" style="width: 150px;" ><span data-bind="visible: $root.turn(), text: $root.turn()<0?'{{ _('RAISE') }}':'{{ _('LOWER') }}', css: {'raise': $root.turn()<0, 'lower': $root.turn()>0}"></span></th>
            <!-- /ko -->
		</tr>
		</thead>
		<tbody>
		<!-- ko foreach:  { data: $root.mesh_data_y(), noChildContext: true }-->
			<tr>
				<td class="text-center info x-axis-label" data-bind="text: $root.mesh_data_y()[$root.descending_y()?$root.mesh_data_y().length-1-$index():$index()]"></td>
				<!-- ko foreach:  { data: $parent.mesh[$root.descending_y()?$root.mesh_data_y().length-1-$index():$index()], as: 'Zvalue', noChildContext: false }-->
					<td class="text-center" style="padding-left: 0.5em;"
						data-bind="
							text: (!$parentContext.$parent.len?
								Math.abs(parseFloat(	$parentContext.$parent.mesh[$root.descending_y()?
									$root.mesh_data_y().length-1-$parentContext.$index():
									$parentContext.$index()][$root.descending_x()?
										$root.mesh_data_x().length-1-$index():
										$index()])):
									parseFloat($parentContext.$parent.mesh[$root.descending_y()?
										$root.mesh_data_y().length-1-$parentContext.$index():
										$parentContext.$index()][$root.descending_x()?
											$root.mesh_data_x().length-1-$index():
											$index()])).toFixed($parentContext.$parent.len),
							click: function(){$root.mesh_zero($root.mesh_data()[$root.descending_y()?
								$root.mesh_data_y().length-1-$parentContext.$index():
									$parentContext.$index()][$root.descending_x()?
										$root.mesh_data_x().length-1-$index():
										$index()]);},
							event: { mouseover: function(item){$root.turn(item);},mouseout: function(){$root.turn(0);}},
							css: {
                                'raise': (Math.sign(parseFloat($parentContext.$parent.mesh[$root.descending_y() ?
                                            $root.mesh_data_y().length - 1 - $parentContext.$index() : $parentContext.$index()][$root.descending_x() ?
                                            $root.mesh_data_x().length - 1 - $index() :
                                            $index()]))) < 0,
                                'lower': (Math.sign(parseFloat($parentContext.$parent.mesh[$root.descending_y() ?
                                            $root.mesh_data_y().length - 1 - $parentContext.$index() : $parentContext.$index()][$root.descending_x() ?
                                            $root.mesh_data_x().length - 1 - $index() :
                                            $index()]))) > 0
                            },
							attr: {'title' : $parentContext.$parent.len ?
								'Z height' :
								!parseFloat($parentContext.$parent.mesh[$root.descending_y()?
									$root.mesh_data_y().length-1-$parentContext.$index():
									$parentContext.$index()][$root.descending_x()?
										$root.mesh_data_x().length-1-$index():
										$index()]) ?
											'-' : (
											(parseFloat($parentContext.$parent.mesh[$root.descending_y()?
												$root.mesh_data_y().length-1-$parentContext.$index():
												$parentContext.$index()][$root.descending_x()?
													$root.mesh_data_x().length-1-$index():
													$index()])<0? '&uarr;' : '&darr;')
								)
							}">
					</td>
					<input type="hidden" data-bind="value: $parentContext.$index()"/>
					<input type="hidden" data-bind="value: $root.mesh_data_y().length"/>
					<input type="hidden" data-bind="value: $index()"/>
					<!-- ko if: $parentContext.$index() == 0 && $root.mesh_data_y().length-$index() == 1 && !$root.settings_active() -->
					<td class="text-center info" style="width: 150px; min-height: 200px; height: 200px;vertical-align: top;" data-bind="attr: {rowspan: $root.mesh_data_x().length + 1}">
						<div data-bind="if: !$data.len">
							<div data-bind="style: {'color': $root.turn()<0?'blue':'red'}">
								<div	style="	width: 120px;
												height: 120px;
												display: block;
												border-radius: 50%;
												border: 2px solid black;
												margin: 1em;"
										data-bind="style: {	'background-color': $root.turn()<0?'blue':'red',
															'background-image': $root.turn()<0 ^ $root.reverse() ?
																	'linear-gradient(' + (Math.abs($root.turn()%360)<180?(Math.abs($root.turn()%360)+ 90):(Math.abs($root.turn()%360)- 90)) + 'deg, transparent 50%, ' + (Math.abs($root.turn()%360)<180?'silver': ($root.turn()<0?'blue':'red')) + ' 50%), linear-gradient(90deg, silver 50%, transparent 50%)':
																	'linear-gradient(' + (360-Math.abs($root.turn()%360)<180?(450-Math.abs($root.turn()%360)):(270-Math.abs($root.turn()%360))) + 'deg, transparent 50%, ' + (Math.abs($root.turn()%360)<180?'silver': ($root.turn()<0?'blue':'red')) + ' 50%), linear-gradient(270deg, silver 50%, transparent 50%)'}">
								</div>
							</div>
							<div class="text-center" style="text-align: center;font-weight: bold;" data-bind="visible: $root.turn(), style: {'color': $root.turn()<0?'blue':'red'}">
								<div>{{ _('turn') }}&nbsp;<span data-bind="text: $root.turn()<0 ^ $root.reverse() ?'{{ _('right') }}':'{{ _('left') }}'"></span></div>
								<span data-bind="text: $root.turn()<0 ^ $root.reverse() ? '&uarr;' : '&darr;'"></span>
								<span data-bind="text: (Math.abs($root.turn()/360)).toFixed(2)"></span>
								<span data-bind="text: $root.turn()<0 ^ $root.reverse() ? '&darr;' : '&uarr;'"></span>
							</div>
						</div>
					</td>
					<!-- /ko -->
				<!-- /ko -->
			</tr>
		<!-- /ko -->
		</tbody>
		<tfoot>
		<tr class="info">
			<th class="text-center" ></th>
			<!-- ko foreach:  { data: ko.utils.range(0,$root.mesh_data_x().length-1), as: 'Xindex', noChildContext: true }-->
				<th class="text-center  y-axis-label" data-bind="text: $root.mesh_data_x()[$root.descending_x()?$root.mesh_data_x().length-1-$index():$index()]"></th>
			<!-- /ko -->
            <!-- ko if: !$root.settings_active() -->
			<th style="width: 150px;"></th>
            <!-- /ko -->
		</tr>
		<tr>
			<td data-bind="attr: {colspan: !$root.settings_active() ? $root.mesh_data_x().length+2 : $root.mesh_data_x().length+1}" style="text-align: center">
				<div class="span5 offset1 x-axis-label" style="font-weight: bold; text-align: center;">x - Position</div>
				<div class="span5 y-axis-label" style="font-weight: bold; text-align: center;">y - Position</div>
			</td>
		</tr>
		<tr>
			<td data-bind="attr: {colspan: !$root.settings_active() ? $root.mesh_data_x().length+2 : $root.mesh_data_x().length+1}" style="text-align: center">
				<div class="control-group" title="Printer bed leveling screws turn direction." data-toggle="tooltip">
					<!-- ko if: $data.len -->
						<span>Z Height: </span>
						<span class="raise">below offset</span>
						<span> / </span>
						<span class="lower">above offset</span>
					<!-- /ko -->
					<!-- ko ifnot: $data.len -->
						<span>Turn direction - </span>
						<span data-bind="css: {'raise': !$root.reverse(), 'lower': $root.reverse()}">clockwise (right)</span>
						<span> / </span>
						<span data-bind="css: {'raise': $root.reverse(), 'lower': !$root.reverse()}">anticlockwise (left)</span>
					<!-- /ko -->
				</div>
			</td>
		</tr>
		</tfoot>
	</table>
</div>
</script>

<!-- Template for custom controls -->
<script type="text/html" id="customBedLevelVisulizerControls_controlTemplate">
	<!-- ko template: { name: 'customBedLevelVisulizerControls_controlTemplate_input', data: $data, if: $data.command().length > 0 } --><!-- /ko -->
</script>

<!-- Template for inputs -->
<script type="text/html" id="customBedLevelVisulizerControls_controlTemplate_input">
	<div class="btn-group" style="display: inline-block; margin-left: 0px; margin-bottom: 5px;">
	<!-- ko foreach: input -->
		<button style="cursor: default" data-bind="text: label, enable: $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting() || $parent.enabled_while_printing()) && (!$root.processing() || $parent.enabled_while_graphing)" class="btn"></button>
		<input type="text" class="input-mini btn active" style="cursor: text;margin-bottom: 0px;" data-bind="attr: {placeholder: label, title: value}, value: value, enable: $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting() || $parent.enabled_while_printing()) && (!$root.processing() || $parent.enabled_while_graphing)">
	<!-- /ko -->
		<!-- ko template: { name: 'customBedLevelVisulizerControls_controlTemplate_command', data: $data} --><!-- /ko -->
	</div>
</script>

<!-- Template for button -->
<script type="text/html" id="customBedLevelVisulizerControls_controlTemplate_command">
	<button class="btn" data-bind="click: $root.runCustomCommand, attr: {title: (tooltip() ? tooltip : command)}, enable: $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting() || enabled_while_printing()) && (!$root.processing() || enabled_while_graphing)"><i data-bind="css: icon"></i> <span data-bind="text: label"/></button>
</script>

